/******************************************************************
Theme Name: Bones (Rename Me!)
Theme URI: http://www.themble.com/bones
Description: This site was built using the Bones Development Theme. For more information about Bones or to view documentation, you can visit the <a href="https://github.com/eddiemachado/bones/issues" title="Bones Issues">Bones Issues</a> page on Github. You'll want to customize this for your clients with your own information.
Author: Your Name Here
Author URI: http://www.yoururlhere.com
Version: 1.3
Tags: flexble-width, translation-ready, microformats, rtl-language-support

License: WTFPL
License URI: http://sam.zoy.org/wtfpl/
Are You Serious? Yes.


MAKE SURE TO READ BELOW BEFORE GETTING STARTED FOR THE FIRST TIME!
------------------------------------------------------------------

/******************************************************************
Site Name:
Author:

Stylesheet: Main Stylesheet

Here's where the magic happens. Here, you'll see we are calling in
the separate media queries. The base mobile goes outside any query
and is called at the beginning, after that we call the rest
of the styles inside media queries.
******************************************************************/

//
// IMPORTING STYLES
//

// import grid
@import "_grid.less";

// import normalize
@import "_normalize.less";

// import mixins
@import "_mixins.less";

/* ==========================================================================
   Classes
   ========================================================================== */

.gradiente-normal {
	.css-gradient(#00367f, #2980f7);
}
.gradiente-claro {
	.css-gradient(#305c97,#5095f4);
}
.sombra {
	.boxShadow(1px, 1px, 3px, 1px, rgba(0, 0, 0, 0.2));
}
.sombra-interna {
	.innerShadow(2px, 2px, 20px, 2px, rgba(0, 0, 0, 0.1));
}

::-webkit-input-placeholder {font-style: italic}
::-moz-placeholder {font-style: italic} /* firefox 19+ */
:-ms-input-placeholder {font-style: italic} /* ie */
input:-moz-placeholder {font-style: italic}

/* ==========================================================================
   Header
   ========================================================================== */

body {
	background-image:url(img/bg.jpg);
	color: #343434;
}

#barra-topo{
	width: 100%;
	height:36px;
	.gradiente-normal;
}

#tudo {
	width:980px;
	min-height:645px;
	margin:0 auto;
}

#news-busca{
	height:35px;
	float:right;
	#news, #busca {
		float: left;
		padding: 5px 10px;
		height:35px;
		background-color: rgba(145, 145, 145, 0.6);
		.border-bottom-radius(5px);
		.sombra;
	}
	input {
		float: left;
		padding-left: 10px;
		font-size: 14px;
	}
	#news{
		width:400px;
		margin-right: 20px;
		label {
			float: left;
			margin-right: 5px;
			font-family: @sans-serif-semi;
			font-weight: 600;
			font-size: 14px;
			color: @white;
			line-height: 25px;
		}
		input {
			width: 188px;
		}
		button {
			margin-left: 5px;
			padding: 0;
			font-family: @sans-serif-semi;
			font-weight: 600;
			font-size: 14px;
			color: #303030;
			line-height: 25px;
			background: none;
			border: none;
		}
	}
	#busca{
		width:220px;
		img {
			float: left;
			margin-right: 5px;
		}
		input {
			width: 170px;
		}
	}
}

header {
	height:105px;
}

.midias-sociais {
	margin-top: 80px;
	width:85px;
	height:35px;
	float:right;
	a {
		float: right;
		margin-left: 5px;
	}
}

/* ==========================================================================
   Banner
   ========================================================================== */

#slides{
	height:425px;
	background-color: rgba(194, 194, 194, 0.6);
	margin-top: 18px;
	position:relative;
	.sombra-interna;
	.item_banner {
		height: 425px;
		position: absolute;
		z-index:1;
		img {
			margin: 10px;
			.sombra;
		}
		.desc_banner {
			height: 389px;
			background-color: rgba(0, 0, 0, 0.5);
			position:absolute;
			right: 0;
			top: 17px;
			padding-left: 20px;
			z-index:2;
			h2{
				color:#008fd5;
				font-family: @sans-serif-bold;
				font-weight: 700;
				font-size:30px;
			}
			p {
				font-size:18px;
				color:#FFF;
				text-shadow: 1px 1px 2px #000000;
				margin: 0;
				filter: dropshadow(color=#000000, offx=1, offy=1);
			}
		}
	}

	#nav {
		min-width:170px;
		height:40px;
		position: absolute;
		bottom: 20px;
		right: 60px;
		z-index: 10;
		.next, .prev {
			float:left;
			width:25px;
			height:35px;
			background-repeat:no-repeat;
		}
		.next {
			background-image:url(img/next.png);
		}
		.prev {
			background-image:url(img/prev.png);
		}
		span {
			cursor: pointer;
			&.dot {
				float:left;
				margin:8px;
				width:17px;
				height:17px;
				background-color:#FFF;
				.border-radius(10px);
				&.ativo {
					background-color:#008fd5;
				}
			}
			&:hover {
				background-color:#008fd5;
			}
		}
	}

	#slides {
      display: none
    }

    #slides .slidesjs-navigation {
      margin-top:5px;
    }

    a.slidesjs-next,
    a.slidesjs-previous,
    a.slidesjs-play,
    a.slidesjs-stop {
      background-image: url(img/btns-next-prev.png);
      background-repeat: no-repeat;
      display:block;
      width:12px;
      height:18px;
      overflow: hidden;
      text-indent: -9999px;
      float: left;
      margin-right:5px;
    }

    a.slidesjs-next {
      margin-right:10px;
      background-position: -12px 0;
    }

    a:hover.slidesjs-next {
      background-position: -12px -18px;
    }

    a.slidesjs-previous {
      background-position: 0 0;
    }

    a:hover.slidesjs-previous {
      background-position: 0 -18px;
    }

    a.slidesjs-play {
      width:15px;
      background-position: -25px 0;
    }

    a:hover.slidesjs-play {
      background-position: -25px -18px;
    }

    a.slidesjs-stop {
      width:18px;
      background-position: -41px 0;
    }

    a:hover.slidesjs-stop {
      background-position: -41px -18px;
    }

    .slidesjs-pagination {
      margin: 7px 0 0;
      float: right;
      list-style: none;
    }

    .slidesjs-pagination li {
      float: left;
      margin: 0 1px;
    }

    .slidesjs-pagination li a {
      display: block;
      width: 13px;
      height: 0;
      padding-top: 13px;
      background-image: url(img/pagination.png);
      background-position: 0 0;
      float: left;
      overflow: hidden;
    }

    .slidesjs-pagination li a.active,
    .slidesjs-pagination li a:hover.active {
      background-position: 0 -13px
    }

    .slidesjs-pagination li a:hover {
      background-position: 0 -26px
    }

    #slides a:link,
    #slides a:visited {
      color: #333
    }

    #slides a:hover,
    #slides a:active {
      color: #9e2020
    }

    .navbar {
      overflow: hidden
    }
}

.textshadow #slides .item_banner .desc_banner h2 {
	.textShadow;
}
/* ==========================================================================
   Menu
   ========================================================================== */

nav#menu {
	margin-top: 15px;
	height: 45px;
	border: solid 1px #b0cdf4;
	.gradiente-normal;
	ul {
		margin: 14px 0;
		li {
			display: inline;
			padding: 0 10px;
			border-left: 2px solid @white;
			&:first-child {
				border: none;
			}
			&:last-child {
				padding-right: 0;
			}
			a {
				font-family: @sans-serif;
				font-size: 0.938em;
				color: @white;
				text-decoration: none;
				&:hover {
					color: #b5b5b5;
				}
			}
		}
	}
}

/* ==========================================================================
   Conteúdo
   ========================================================================== */

section {
	font-size: 14px;
	div {
		padding-bottom: 20px;
	}
	h1 {
		color: #2980f7;
		font-family: @sans-serif-bold;
		font-weight: 700;
	}
	h2 {
		font-family: @sans-serif;
		font-size: 24px;
		font-weight: bold;
	}
	img.lateral {
		border: 11px solid #bbb;
	}
	// produtos
	.produto {
		position: relative;
		margin-top: 53px;
		font-size: 1em;
		background: @white;
		border: 7px solid #d1d2d4;
		h2 {
			position: absolute;
			top: -50px;
			left: -5px;
			margin: 0;
			padding: 10px;
			min-width: 210px;
			font-family: @sans-serif-bold;
			font-size: 22px;
			font-weight: 700;
			color: @white;
			display: block;
			background: #4978bc;
			z-index: -1;
			.innerShadow(0, -16px, 6px, -6px, rgba(0, 40, 66, 0.55));
		}
		a {
			text-decoration: none;
		}
		img {
			float: left;
			width: 225px;
		}
		div {
			float: right;
		    width: 150px;
		    margin: 10px 15px 0 0;
		    padding: 0;
		}
		p {
			span {
				font-weight: bolder;
				color: #4978bc;
			}
			float: right;
			margin: 3px 0;
			width: 225px;
			text-align: right;
			color: #939598;
			&:first-child {
				margin-top: 15px;
			}
		}
	}
	// produto-item

	.produto-item {

	}

	.produto-desc {
		background: #dbdbdb;
		td:first-child {
			text-align: right;
			color: red;
		}
	}

	// faça seu pedido
	.pedido {
		background: url(img/bg-embalagem-t.png) center center no-repeat;
		form#pedido {
			padding: 10px;
			width: 450px;
			height: 230px;
			background: rgba(220, 220, 220, 0.7);
			border: 10px solid rgba(133, 133, 133, 0.4);
			margin: 0 auto;
			.boxShadow(0,0,21px,4px,rgba(37,36,32,.3));
			display:table;
			label {
				font-family: @sans-serif;
				font-size: 18px;
				color: #343434;
			}
			input {
				margin-bottom: 10px;
				width: 100%;
				height: 30px;
				border: none;
				font-size: 20px;
				color: #343434;
				display: table-cell;
			}
		}
	}

	.representantes {
		div {
			display: none;
		}
	}

	// fale conosco
	.contato {
		padding-bottom: 20px;
		background: url(img/bg-embalagem-t.png) center center no-repeat;
		form#contato {
			padding: 10px;
			width: 450px;
			background: rgba(220, 220, 220, 0.7);
			border: 10px solid rgba(133, 133, 133, 0.4);
			margin: 0 auto;
			.boxShadow(0,0,21px,4px,rgba(37,36,32,.3));
			display:table;
			label {
				font-family: @sans-serif;
				font-size: 18px;
				color: #343434;
				//display: table-cell;
			}
			input {
				margin-bottom: 10px;
				width: 100%;
				height: 30px;
				border: none;
				font-size: 20px;
				color: #343434;
				display: table-cell;
				&[type=submit] {
					width: 100px;
					background: #2980f7;
					color: #fff;
				}
			}
			textarea {
				margin-bottom: 10px;
				width: 100%;
				border: none;
				font-size: 20px;
				color: #343434;
				display: table-cell;
			}
			p {
				margin: 3px 0 0 0;
			}
		}
	}

}

.cssgradients section h1{
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	.gradiente-normal;
}

/* ==========================================================================
   Footer
   ========================================================================== */

footer#rodape {
	height: 95px;
	.gradiente-claro;
	#info {
		float: right;
		margin-top: 14px;
		p {
			margin: 0;
			font-family: @sans-serif;
			font-size: 11px;
			color: @white;
		}
	}
}

/* ==========================================================================
   Scroll
   ========================================================================== */

.scroll-content {position:absolute;top:0;left:0;margin-right:25px;margin-left:4px;}
.slider-wrap {position:absolute;right:0;top:0;background-color:#dcdcdc;width:20px;overflow:hidden}
.slider-vertical {position:relative;height:100%}
.ui-slider-handle {width:20px;height:10px;margin:0 auto;background-color:#bababa;display:block;position:absolute}
.ui-slider-handle img{border:none}
.scrollbar-top {position:absolute;top:0;}
.scrollbar-bottom {position:absolute;bottom:0;}
.scrollbar-grip {position:absolute;top:50%;margin-top:-6px;}
.ui-slider-range {position:absolute;width:100%;background-color:#dcdcdc}

#scroll-pane,.scroll-pane {float:left;overflow: auto;height:387px;position:relative;padding: 0;display:inline; margin-bottom:15px}
.scroll-content-item {background-color:#fcfcfc;color:#003366;width:100px;height:100px;float:left;margin:10px;padding: 0;font-size:3em;line-height:96px;text-align:center;border:1px solid gray;display:inline;}